<script>
export default {
  name: "ManageMenDian",
  data(){
    return{
      goodsList:[],
      searchContent:{
        keyword:'',
        time:[]
      },
      //分页数据
      page:1,
      size:10,
      total:0,//总条数
      // 对话框
      dialogFormVisible:false,
      formLabelWidth: '120px',
      //对话框数据
      from:{
        id:'',
        name:'',
        author:'',
        price:'',
        typeId:'',
        count:'',
        typeName:'',//返回的book对象有这个属性
        mode:1,//1表示新增，2表示编辑
        typeList:[]//选择下拉框框数据
      },
      //表格行数据
      index:'',
      row:''
    }
  },
  methods:{
    // 格式化日期时间的方法
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    searchClick(){
      console.log("触发");
      let  startTime='';
      let endTime='';
      if(this.searchContent.time===undefined||this.searchContent.time===null){
        this.searchContent.time=[];
      }
      if (this.searchContent.time.length > 0) {
        startTime=this.searchContent.time[0] === undefined ? '' : this.formatDateTime(this.searchContent.time[0]);
        endTime=this.searchContent.time[1] === undefined ? '' : this.formatDateTime(this.searchContent.time[1]);
      }
      this.axios.get("http://localhost:8080/panghudaojiaBackend/shop/goodsList",
          {
            params:
                {
                  page:this.page,
                  size:this.size,
                  shopId:this.getShopId,
                  goodsName:this.searchContent.keyword===undefined?"" : this.searchContent.keyword,
                  startTime:startTime,
                  endTime:endTime,
                }
          }).then((res)=>{
        this.goodsList=res.data.list;
        this.total=res.data.count;
      }).catch();
    },
    // 初始化表格
    initTable(){
      let  startTime='';
      let endTime='';
      if (this.searchContent.time===undefined){
        this.searchContent.time=[];
      }
      if (this.searchContent.time.length >0) {
        startTime=this.searchContent.time[0] === undefined ? '' : this.formatDateTime(this.searchContent.time[0]);
        endTime=this.searchContent.time[1] === undefined ? '' : this.formatDateTime(this.searchContent.time[1]);
      }
      this.axios.get("http://localhost:8080/panghudaojiaBackend/shop/goodsList",{params:
            {
              page:this.page,
              size:this.size,
              shopId:this.getShopId,
              goodsName:this.searchContent.keyword===undefined?"" : this.searchContent.keyword,
              startTime:startTime,
              endTime:endTime,

            }
      }
      ).then((res)=>{
        console.log(res.data);
        this.goodsList=res.data.list;
        this.total=res.data.count;
        console.log(this.count);
      }).catch((err)=>{
        console.log(err);
      })
    },
    //下一页
    nextClick(){
      this.page=this.page+1;
      this.initTable();
    },
    //上一页
    prevClick(){
      this.page--;
      this.initTable();
    },
    //点击任意页
    currentChange(currentPage){
      this.page=currentPage;
      this.initTable();
    },
    //增加书籍
    addBook(){
      this.from.mode=1;
      this.dialogFormVisible=true;
    },
    //编辑书籍
    handleEdit(index, row){
      this.index=index;
      this.row=row;
      this.from.mode=2;
      this.showBackBook();
      this.dialogFormVisible=true;

    },
    //删除书籍
    handleDelete(index, row){
      this.axios.get("book/delete",{params:{id:row.id}}).then((res)=>{
        console.log(res);
        //更新数据
        this.initTable();

      }).catch((err)=>{
        console.log(err)})
    },
    //将数据回显
    showBackBook(){
      this.from.id=this.row.id;
      this.from.name=this.row.name;
      this.from.author=this.row.author;
      this.from.price=this.row.price;
      this.from.typeId=this.row.typeId;
      this.from.count=this.row.count;

    },
    //清除对话框数据
    clearDialog(){
      this.from.id='';
      this.from.name='';
      this.from.author='';
      this.from.price='';
      this.from.typeId='';
      this.from.count='';
    },

    //初始化下拉框
    initSelect(){
      this.axios.get("/type/list").then((res)=>{
        console.log(res.data.typeList);
        this.from.typeList=res.data.typeList;
      }).catch((err)=>{
        console.log(err);
      });
    },
    //对话框确定按钮
    putFrom(){

      if (this.from.mode===1){
        //开始增加
        this.axios.post("/book/add",{
              id:this.from.id,
              name:this.from.name,
              author:this.from.author,
              price:this.from.price,
              typeId:this.from.typeId,
              count:this.from.count,

            },
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }
        ).then((res)=>{
          console.log(res);
          this.dialogFormVisible=false;
          this.clearDialog();
        }).catch((err)=>{
          console.log(err);
        });
      }else if(this.from.mode===2){
        //开始修改
        this.axios.post("/book/update",{
              id:this.from.id,
              name:this.from.name,
              author:this.from.author,
              price:this.from.price,
              typeId:this.from.typeId,
              count:this.from.count,

            },
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }
        ).then((res)=>{
          console.log(res);
          this.dialogFormVisible=false;
          this.clearDialog();

        }).catch((err)=>{
          console.log(err);})
      }

    }
  },
  computed:{
    getShopId(){
      return this.$route.query.id;
    }
  },
  created() {
    this.initTable();
    this.initSelect();
  }
}
</script>

<template>
<div class="manage">
  <div class="header">

  </div>

  <!-- 搜索框 -->
  <div class="searchAndDate cf">
    <div class="search">
      <span>商品名称：</span>
      <el-input v-model="searchContent.keyword" placeholder="请输入内容" class="searchInputSize"></el-input>
    </div>
    <div class="date">
      <span>提交日期：</span>
      <el-date-picker
          v-model="searchContent.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
  </div>
<!--  对话框-->
<!--  <el-button type="primary" @click="addBook">新增书籍</el-button>-->
  <el-dialog :title="this.from.mode===1?'新增书籍':'编辑书籍'" :visible.sync="dialogFormVisible">
    <el-form :model="from">
      <!--编号id-->
      <el-form-item label="编号" :label-width="formLabelWidth">
        <el-input v-model="from.id" autocomplete="off"></el-input>
      </el-form-item>
      <!--      书籍名称-->
      <el-form-item label="书籍名称" :label-width="formLabelWidth">
        <el-input v-model="from.name" autocomplete="off"></el-input>
      </el-form-item>

      <!--      作者-->
      <el-form-item label="作者" :label-width="formLabelWidth">
        <el-input v-model="from.author" autocomplete="off"></el-input>
      </el-form-item>
      <!--        价格-->
      <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input v-model="from.price" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="类型">
        <!--        这个绑定id，不是数组-->
        <el-select v-model="from.typeId" placeholder="请选择类型">

          <el-option v-for="(v,i) in from.typeList" :label="v.type" :value="v.id" :key="v.id">{{v.type}}</el-option>

        </el-select>
      </el-form-item>

      <!--      数量 -->
      <el-form-item label="数量" :label-width="formLabelWidth">
        <el-input v-model="from.count" autocomplete="off"></el-input>
      </el-form-item>



    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="putFrom">确 定</el-button>
    </div>
  </el-dialog>
<!--  表格-->
  <div class="formTable">
    <el-table
        :data="goodsList"
        style="width: 100%"
        :header-cell-style="{'text-align': 'center',backgroundColor: '#1890ff',color:'#fff'}"
        :cell-style="{'text-align': 'center'}"
    >
      <el-table-column
          prop="goodsName"
          label="商品名字"
          width="180">
      </el-table-column>
      <el-table-column
          prop="goodsPresentPrice"
          label="商品现价"
          width="180">
      </el-table-column>




<!--      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>-->
    </el-table>
  </div>
  <!--  分页查询-->
  <div class="block">
    <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :current-page="page"
        @next-click="nextClick"
        @prev-click="prevClick"
        @current-change="currentChange"
    >
    </el-pagination>
  </div>
</div>
</template>

<style scoped>
.manage{
  height: 800px;
  background-color: yellowgreen;
}
.searchAndDate {
  margin-top: 30px;
}
.search {
  width: 320px;
  height: 36px;
  margin-right: 20px;
  margin-bottom: 10px;
  float: left;
}

.date {
  width: 430px;
  height: 36px;
  margin-right: 20px;
  margin-bottom: 10px;
  float: left;
}
.searchInputSize {
  box-sizing: border-box;
  width: 200px;
  height: 36px;
  padding: 0 15px;
}
</style>